<style lang="scss" scoped>
.map-wrapper {
    width: 30px;
    // height: 32px;
    // display: inline-block;
    cursor: pointer;
    img {
        width: 100%;
        float: left;
    }
}
</style>

<template>
    <div class="map-wrapper" @click="openModal" title="选择景区位置">
        <img src="static/img/map-icon.9a4239f5.svg" alt="tencent-map-icon">
        <div
            title
            class="map-model"
            v-model="visible"
            @ok="handleConfirm"
            okText="确认"
            cancelText="取消"
        >
            <form class="map-inquery-wrapper" layout="inline">
                <form
                    help="注：地址中请包含城市名称，否则会影响解析效果"
                    style="max-width: 188px;margin-bottom:0;"
                >
                    <input placeholder="请输入景区地址" v-model="address" @pressEnter="handleInquery"/>
                </form>
                <form>
                    <button type="primary" @click="handleInquery">查询</button>
                </form>
                <form label="当前坐标">
                    <input v-model="displayLocation" disabled/>
                </form>
                <form label="当前地址" class="col-expand">
                    <input v-model="pickedAddress" disabled/>
                </form>
            </form>
            <div ref="container" class="map-container" id="container"></div>
        </div>
    </div>
</template>

<script>
export default {
    name: "MapPicker",
    data() {
        return {
            visible: false,
            geocoder: null,
            map: null,
            marker: null,
            address: "",
            pickedLocation: {},
            pickedAddress: "",
            pickedAddressComponents: {}
        };
    },
    mounted() {
        this.init();
    },
    computed: {
        displayLocation() {
            if (!this.pickedLocation.lat) return "";
            return this.pickedLocation.lat + " , " + this.pickedLocation.lng;
        }
    },
    methods: {
        openModal() {
            this.visible = true;
            this.$nextTick(() => {
                if (this.geocoder) return;
                this.init();
            });
        },
        hideModal() {
            this.visible = false;
        },
        handleConfirm() {
            this.$emit("mapPick", {
                location: this.pickedLocation,
                address: this.pickedAddress,
                addressComponents: this.pickedAddressComponents
            });
            this.hideModal();
        },
        handleInquery() {
            this.geocoder.getLocation(this.address);
        },
        init() {
            let vm = this;
            var center = new qq.maps.LatLng(39.916527, 116.397128);

            this.map = new qq.maps.Map(this.$refs.container, {
                center: center,
                draggableCursor: "crosshair",
                zoom: 15
            });
            //添加鼠标移动事件
            qq.maps.event.addListener(this.map, "click", function(event) {
                var latLng = event.latLng,
                    lat = latLng.getLat().toFixed(6),
                    lng = latLng.getLng().toFixed(6);
                var latLng = new qq.maps.LatLng(lat, lng);
                vm.geocoder.getAddress(latLng);
            });
            //调用地址解析类
            this.geocoder = new qq.maps.Geocoder();
            this.geocoder.setComplete(function(result) {
                // if (result.detail.hasOwnProperty("gps_type")) {
                var { location, address, addressComponents } = result.detail;
                // } else {
                // 	var { latLng: location, name: address } = result.detail.nearPois[0];
                // }
                vm.map.setCenter(location);
                //处理marker
                vm.marker && vm.marker.setMap(null);
                vm.marker = new qq.maps.Marker({
                    map: vm.map,
                    position: location
                });
                vm.pickedLocation = location;
                vm.pickedAddress = address;
                vm.pickedAddressComponents = addressComponents;
            });
            this.geocoder.setError(function(a, b) {
                console.log(a, b);
            });
        }
    }
};
</script>

